<template>
    <div class="container">
        <el-form ref="loginForm" :model="formData" :rules="rules" label-width="65px" hide-required-asterisk>
            <h2>十方智育 - 后台登录</h2>
            <el-form-item label="账号" prop="username">
                <el-input v-model="formData.username" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="formData.password" placeholder="请输入密码" type="password" show-password
                    prefix-icon="el-icon-lock">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
                <el-button @click="resetForm">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formData: {
                username: '',
                password: ''
            },
            rules: {
                username: [{
                    required: true,
                    message: '请输入账号',
                    trigger: 'blur'
                },
                {
                    min: 2,
                    max: 20,
                    message: '长度在 2 到 20 个字符',
                    trigger: 'blur'
                }
                ],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                },
                {
                    min: 6,
                    message: '长度至少 6 个字符',
                    trigger: 'blur'
                }
                ]
            }
        }
    },
    methods: {
        login() {
            // 先验证form表单是否满足验证规则，如果满足则调其中的方法
            // function(valid){.....} --> (valid)=>{....}
            this.$refs['loginForm'].validate((valid) => {
                if (valid) {
                    // 去登录的功能
                    this.$http.post('systemuser/login',this.formData)
                        .then(res => {
                            console.log(res)
                            if (res.data.status == 200) {
                                this.$message.success("登陆成功")
                                // 获取返回的数据，并保存到本地用于后面的使用
                                sessionStorage.setItem('id', res.data.data.id)
                                sessionStorage.setItem('username', res.data.data.username)
                                sessionStorage.setItem('nickname', res.data.data.nickName)
                                localStorage.setItem('userInfo', JSON.stringify(res.data.data))
                                this.$router.push('/main')
                            } else {
                                this.$message.error('用户名或密码有误！')
                            }
                        })
                } else {
                    this.$message({
                        showClose: true,
                        message: '请输入正确的账号和密码！',
                        type: 'error'
                    });
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs['loginForm'].resetFields();
        }
    }

}
</script>
<!-- scoped： 代表当前的css样式，只作用于当前的组件中，而不是全局 -->
<style scoped="scoped">
.container {
    height: 100vh;
    /* vh:view height*/
    background: url('../assets/login_bg.jpg') no-repeat center;
    overflow: hidden;
    background-size: 100% 100%;
}

.el-form {
    width: 450px;
    margin: 150px auto;
    padding: 30px 50px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    background: rgba(255, 255, 255, 0.8);
}

h2 {
    text-align: center;
}
</style>